<template>
  <h3>diagRightMenu 医生诊台右侧功能柱</h3>
  <div class="h500 flex flex-justify-between">
    <div style="flex: 1" class="b mr10">
      我是中间人
    </div>
    <f-diag-right-menu ref="diagRightMenuRef" :data="menuData" isMaskClose />
  </div>
</template>

<script setup>
import { h, ref, markRaw } from 'vue';
import test from './test.vue';

const diagRightMenuRef = ref();

const onEvents = {
  // ...其它组件自定义事件
  onFixed: (params) => {
    diagRightMenuRef.value.fixed();
  },
  onClose: (params) => {
    diagRightMenuRef.value.close();
  }
};

const menuData = ref([
  { label: '测试', key: '1', icon: 'question-circle', component: markRaw(test), bind: { id: '0'}, on: onEvents },
  { label: '质控', key: '2', icon: 'question-circle', component: test }, // 不推荐写法
  { label: '知识库', key: '3', component: h(test), width: 200, fixed: true },
  { label: '短语', key: '4', image: 'upload/20240624/b8aa9866c59243e2a63ef91873f01a17.png' }
]);
</script>

<style lang="scss"></style>
